<template>
  <div>
    <van-nav-bar title="每日头条-登录" />
    <div>
      <!-- 自定义事件@submit 提交事件
      van-fields输入框（表单一项）
      label输入框左侧文本
      rules表单校验规则
      :属性="表达式"
      属性="字符串"
       -->
      <van-form @submit="onSubmit">
  <van-field
    v-model="user.mobile"
    name="mobile"
    required
    label="手机号"
    placeholder="请输入11位手机号"
    :rules="[{ required: true, message: '请填写手机号' ,pattern:/^1[3-9]\d{9}$/}]"
  />
  <van-field
    v-model="user.code"
    type="password"
    name="code"
    required
    label="密码"
    placeholder="请输入六位数的密码"
    :rules="[{ required: true, message: '请填写密码',pattern:/^\d{6}$/ }]"
  />
  <div style="margin: 16px;">
    <!-- round是否为圆形
      （1）：属性后面没有值，默认值为true
      block代表块级元素
      type代表的类型
      native-type代表原生的button的type属性
      代表这个van-button组件渲染的原生button标签type是submit提交整个表单功能的按钮
     -->
    <van-button round block type="info" native-type="submit"
    :loading="isLoading"
    :disabled="isLoading"
    loading-text="正在登录中..."
    >提交</van-button>
  </div>
</van-form>
    </div>
  </div>
</template>

<script>
import { loginAPI } from '@/api'
import { setToken } from '@/utils/token'
import Notify from '@/ui/Notify'
import { setStorage } from '@/utils/storage'
export default {
  name: 'myIndex',
  data () {
    return {
      user: {
        mobile: '', // 手机号
        code: '' // 验证码（密码必须是246810）
      },
      isLoading: false // 登录按钮的加载状态
    }
  },
  methods: {
    // 提交方法（需要进行表单验证才能通过）
    async onSubmit (values) {
      console.log('submit', values)
      console.log(this.user)
      // 设置状态
      this.isLoading = true
      try {
        const res = await loginAPI(this.user)
        console.log(res)
        Notify({ type: 'success', message: '登录成功！' })
        setToken(res.data.data.token)
        setStorage('refresh_token', res.data.data.refresh_token)
        // 跳转一定要写在最后 location.href ->当前浏览器地址和跳转的地址一样（不包含#后面的锚点信息）->不会刷新页面
        // 地址改变，就会导致网页刷新
        // this.$router.push()压栈 （会产生历史记录，可以回退）this.$router.replace()替换不会产生历史记录
        this.$router.replace({
          path: this.$route.query.path || '/layout/home'// 因为路由规则里/layout 里没有重定向，所以直接在这写全
        })
      } catch (err) {
        // Promise内ajax抛出错误，直接进入这里
        Notify({ type: 'danger', message: '账号或密码错误' })
      }
      this.isLoading = false// 无论网络请求成功、报错，把状态关掉
    }
  }
}
</script>

<style>
/* .van-nav-bar{
  background-color: #007bff;
} */
/* 此选择器的名字是van-nav-bar组件内标签，scoped尝试把此选择器后属性选择器匹配当前页面标签（选不中内部的）  */
/* lang="less"当前style标签是less语法、deep会把属性选择器加到前面（用后代选择器的方式往里找匹配的类名） */
/* /deep/ .van-nav-bar__title{
  color: white;
} */
</style>
